<!-- 模板 -->
<template>

<!--

  :show 是否展示 
    :dataArr  展示数据
    @hide 点击了选择器的取消按钮
    @cascaderShow 选择器被开启
    @cascaderSelect 单一选择完成,每一级的选择完成
    @cascaderResult 全部选择完成

 -->
  <div id="cascader" v-bind:class="{show: show}">
    <div class="cascader-box">
      <div class="cascader-top border-b">
        <div class="left-btn tx-cyan" @click="cancelFun">取消</div>
        <h3>{{titleName}}</h3>
        <div class="right-btn tx-cyan" @click="submitFun">确定</div>
      </div>
      <div class="cascader-content">
        <div class="w-3 fl scrollBox">
          <swiper class="scroll" :options="swiperOption1" ref="mySwiper1">
            <!-- slides -->
            <swiper-slide></swiper-slide>
            <swiper-slide></swiper-slide>
            <swiper-slide v-for="item in data1" :key="item.value">
              <div :id='item.value'>{{item.label}}</div>
            </swiper-slide>
            <swiper-slide></swiper-slide>
            <swiper-slide></swiper-slide>
          </swiper>
        </div>
        <div class="w-3 fl scrollBox">
        	<swiper class="scroll" :options="swiperOption2" ref="mySwiper2">
            <!-- slides -->
            <swiper-slide></swiper-slide>
            <swiper-slide></swiper-slide>
            <swiper-slide v-for="item in data2" :key="item.value">
              <div :id='item.value'>{{item.label}}</div>
            </swiper-slide>
            <swiper-slide></swiper-slide>
            <swiper-slide></swiper-slide>
          </swiper>
        </div>
        <div class="w-3 fl scrollBox">
        	<swiper class="scroll" :options="swiperOption3" ref="mySwiper3">
            <!-- slides -->
            <swiper-slide></swiper-slide>
            <swiper-slide></swiper-slide>
            <swiper-slide v-for="item in data3" :key="item.value">
              <div :id='item.value'>{{item.label}}</div>
            </swiper-slide>
            <swiper-slide></swiper-slide>
            <swiper-slide></swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <div class="cs-bg"></div>
  </div>
</template>

<!-- js -->
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  props: {
    'dataArr': {
      type: Array
    },
    'show': {
      type: Boolean,
      default: false
    }
  },
  data () {
    const self = this
    return {
      titleName:'三级联动选择器',
      isShow: false,
      data1: [],
      data2: [],
      data3: [],
      result1: {},
      result2: {},
      result3: {},
      swiperOption1: {
        direction : 'vertical',
        slidesPerView : 'auto',
        slidesPerGroup : 1,
        debugger: true,
        on: {
          slideChangeTransitionStart() {
            let target = this.slides[this.realIndex + 2]
            if(target.firstChild){
              let result = {
                label: target.firstChild.innerHTML,
                value: target.firstChild.id
              }
              self.updateSecond(result.value)
              self.$emit('cascaderSelect', result)
            }
          }
        }
      },
      swiperOption2: {
        direction : 'vertical',
        slidesPerView : 'auto',
        slidesPerGroup : 1,
        debugger: true,
        on: {
          slideChangeTransitionStart() {
            let target = this.slides[this.realIndex + 2]
            if(target.firstChild){
              let result = {
                label: target.firstChild.innerHTML,
                value: target.firstChild.id
              }
              self.updateThird(result.value)
              self.$emit('cascaderSelect', result)
            }
          }
        }
      },
      swiperOption3: {
        direction : 'vertical',
        slidesPerView : 'auto',
        slidesPerGroup : 1,
        debugger: true,
        on: {
          slideChangeTransitionStart() {
            let target = this.slides[this.realIndex + 2]
            if(target.firstChild){
              let result = {
                label: target.firstChild.innerHTML,
                value: target.firstChild.id
              }
              self.$emit('cascaderSelect', result)
            }
          }
        }
      }
    }
  },
  watch:{
    show: function(val,oldval){
        if(this.show == true){
          this.reset()
          this.$emit('cascaderShow', 'open-cascader')
        }
    }
  },
  created: function () {
    this.init()
  },
  computed: {
    swiper1() {
      return this.$refs.mySwiper1.swiper
    },
    swiper2() {
      return this.$refs.mySwiper2.swiper
    },
    swiper3() {
      return this.$refs.mySwiper3.swiper
    }
  },
  methods: {
    init: function () {
      this.data1 = this.dataArr
      this.data2 = this.dataArr[0].children
      this.data3 = this.dataArr[0].children[0].children
    },
    reset: function () {
      this.swiper1.slideTo(0, 0, true)
      this.swiper2.slideTo(0, 0, true)
      this.swiper3.slideTo(0, 0, true)
    },
    updateSecond: function (val) {
      for (var i = 0; i < this.dataArr.length; i++) {
        if(this.dataArr[i].value === val){
          this.data2 = this.dataArr[i].children
        }
      }
      this.swiper2.slideTo(0, 500, false)
      this.updateThird(this.data2[0].value)
    },
    updateThird: function (val) {
      for (var i = 0; i < this.data2.length; i++) {
        if(this.data2[i].value === val){
          this.data3 = this.data2[i].children
        } 
      }
      this.swiper3.slideTo(0, 500, false)
    },
    getresult: function (obj) {
      let target = obj.slides[obj.realIndex + 2]
      if(target.firstChild){
        let result = {
          label: target.firstChild.innerHTML,
          value: target.firstChild.id
        }
        return result
      }
    },
    cancelFun: function () {
      this.$emit('hide', 'close-cascader')
    },
    submitFun: function () {
      let first = this.getresult(this.swiper1)
      let second = this.getresult(this.swiper2)
      let third = this.getresult(this.swiper3)
      let data = {
        first, second, third
      }
    	this.$emit('cascaderResult', data)
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<!-- style -->
<style scoped>
/*common css*/
ul,li,h3{
  text-align: center;
  padding: 0;
  margin: 0;
}
li{
  list-style: none;
}
.border-b{
  border-bottom:solid #ececec 1px;
}
.tx-orange{
  color: #c23047;
}
.tx-cyan{
  color: #00bcd2;
}
.tx-gray{
  color: #888;
}
.tx-yellow{
  color: #ed8000;
}
.w-3{
  width: 33.333333%;
}
.fl{
  float: left;
}
.over-h{
  overflow: hidden;
}
.opa-0{
  opacity: 0;
}
.dis-n{
  display: none;
}
/*my style*/
#cascader{
  height: 0px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100000;
}
#cascader.show{
  height: auto;
}
.cascader-box{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: #fff;
  box-shadow: 0 0 10px #acacac;
  border-radius: .2em .2em 0 0;
  color: #131313;
}
.cs-bg{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background-color: #000;
  opacity: .6;
}
.cascader-top{
  position: relative;
  height: 3em;
}
.cascader-top .left-btn{
  position: absolute;
  top: 0;
  left: 0;
  height: 3em;
  line-height: 3em;
  font-size: 1em;
  padding: 0 1em;
}
.cascader-top .right-btn{
  position: absolute;
  top: 0;
  right: 0;
  height: 3em;
  line-height: 3em;
  font-size: 1em;
  padding: 0 1em;
}
.cascader-top h3{
  line-height: 3em;
  font-size: 1em;
  color: #333;
  font-weight:normal;
}
.cascader-content{
  position: relative;
  height: 10em;
  overflow: hidden;
  margin: 0.5em;
}
.cascader-content li{
  line-height: 2em;
  font-size: 1em;
}
.scrollBox{
  height: 100%;
}
.scroll{
  position: relative;
  height: 100%;
}
.scroll:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 4em;
  width: 100%;
  background-color: #fff;
  opacity: 0.6;
}
.scroll:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 4em;
  width: 100%;
  background-color: #fff;
  opacity: 0.6;
}

/*swiper*/
.swiper-wrapper{
  height: 10em;
}
.swiper-slide{
  height: 2em;
  line-height: 2em;
  text-align: center;
}
</style>